<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const chartData = ref({})

	const options = ref({
		rotate: false,
		rotateLock: false,
		color: ["#ef476f", "#ffd166", "#3ab54a"],
		// padding: [5, 5, 5, 5],
		dataLabel: false,
		enableScroll: true,
		legend: {
			show: false,
			position: "right",
			lineHeight:20
		},
		title: {
			name: "当前减排进度",
			fontSize: 20,
			color: "#666666"
		},
		subtitle: {
			name: "70%",
			fontSize: 15,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: "#E8F5E9",
				centerColor:"#E8F5E9"
			},
			tooltip:{
				show:true
			}
		}
	})

	function getData() {
		setTimeout(() => {
			chartData.value = {
				series: [
					{
						name: "已完成",
						data: 70
					},
					{
						name: "进行中",
						data: 20
					},
					{
						name: "未开始",
						data: 10
					}
					
				]
			}
		}, 100)
	}

	onMounted(getData)
</script>

<template>
	<view class="index">
		<view class="chart-container">
			<qiun-data-charts 
				type="ring" 
				:chartData="chartData" 
				:opts="options"
			></qiun-data-charts>
		</view>
		<view class="">
			
		</view>
	</view>
</template>

<style scoped lang="scss">
	.index{
		// padding-top: 40rpx;
		.chart-container {
			width: 100%;
			height: 460rpx;
			margin: 0 auto;
		}
	}

</style>